<template>
  <div class="header">
    <div class="left">
      <span class="iconfont iconjiantou2" @click="$router.back()"></span>
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 使用父组件传进来的 post 数据判断有没有关注过,显示不同的按钮 -->
    <div class="btnFollowActive" v-if="!post.has_follow" @click="follow">
      <!-- 如果显示出来,证明没有关注,我们需要监听点击事件发送请求关注这个用户 -->
      关注
    </div>
    <!-- 如果已关注可以取消关注,在这里绑定一个 click 事件即可 -->
    <div class="btnFollow" v-else-if="post.has_follow" @click="unfollow">已关注</div>
  </div>
</template>

<script>
export default {
  props: ["post"],
  methods: {
    follow() {
      // 在这里我们发送ajax请求关注用户
      this.$axios({
        url: "/user_follows/" + this.post.user.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        //  如果我们点击关注,返回的 message == "关注成功"  那么这个请求就完成了
        if (message == "关注成功") {
          this.post.has_follow = true;
        }
      });
    },
    unfollow() {
      // 发送 ajax 请求取消关注用户
      this.$axios({
        url: "/user_unfollow/" + this.post.user.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        //  如果我们点击已关注,返回的 message == "取消关注成功"  那么这个请求就完成了
        if (message == "取消关注成功") {
          this.post.has_follow = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  height: 12.5vw;
  justify-content: space-between;
  align-items: center;
  padding: 0 4.167vw;
}
.left {
  display: flex;
  align-items: center;
  .iconnew {
    margin-left: 1.111vw;
    font-size: 15vw;
  }
}
.btnFollowActive {
  height: 7.222vw;
  line-height: 7.222vw;
  padding: 0 3.333vw;
  text-align: center;
  color: #fff;
  background: red;
  border-radius: 6.944vw;
}
.btnFollow {
  height: 7.222vw;
  line-height: 7.222vw;
  text-align: center;
  color: #333;
  padding: 0 3.333vw;
  border-radius: 6.944vw;
  border: 1px solid #dedede;
}
</style>
